<template>
  <el-form :model="form" label-width="120px">
    <el-form-item label="用户名">
      <el-input v-model="form.adminname" />
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="form.password" type="password" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">登录</el-button>
      <el-button>重置</el-button>
    </el-form-item>
  </el-form>

  <img src="../assets/imgs/01.jpg">
  <img :src="img02">

</template>
  
<script  setup>
import { reactive,ref } from 'vue';
import { useRouter } from "vue-router";
import api from "@/api/index.js"
import img02 from "../assets/imgs/02.jpg"

const $router = useRouter();

const form = reactive({
  adminname: "查询权限",
  password: "123"
})

const onSubmit = async () => {
  // console.log("form",form);
  // 1、如果非空验证通过
  // 2、发送请求
  try {
    const res = await api.loginApi(form);
    // 3、根据响应结果
    if (res.data.code === "200") {
      console.log("登录成功：res",res);
      //     1）、保存token
      sessionStorage.setItem("token", res.data.data.token);
      //     2）、保存用户信息
      sessionStorage.setItem("username", form.adminname);

      // 3）、保存权限数据
      sessionStorage.setItem("checkedKeys", JSON.stringify(res.data.data.checkedkeys));

      // 4）、跳转到首页
      $router.push("/Admin");
    } else {
      alert("登录失败，用户名或者密码不对！");
    }

  } catch (err) {
    alert("登录失败！服务器出错");
    console.log("err", err);
  }


}


</script>